$(function () {
    var page = 1, //分页码
        off_on = false; //分页开关(滚动加载方法 1 中用的)

    getList()
    function getList() {
        $(".more").text('数据加载中...');
        // 获取后台数据
        $.ajax({
            url: "../mock/place.json",
            dataType: "json",
            type: "get",
            data: {
                key: "7486e10d3ca83a934438176cf941df0c",
                page: page
            },
            success: function (res) {

                // mock随机数据
                var json = res;

                if (json.code === 0) {
                    console.log(json);  //在console中查看数据
                    var html = "";
                    for (var i = 0; i < json.data.length; i++) {
                        html += '<li class="item"><div class="conten"><img src="' + json.data[i].logo + '" alt=""><div class="title"><h4>' + json.data[i].title + '</h4><p>' + json.data[i].place + '</p></div></div><div class="sel"><div class="item" onclick="navigation(' + json.data[i].position[0] + ',' + json.data[i].position[1] + ',\'' + json.data[i].title + '\')"><i class="iconfont icon-ziyuan"></i><span>导航</span></div><div class="item" onclick="tel(' + json.data[i].tel + ')"><i class="iconfont icon-dianhua"></i><span>致电</span></div></div></li>'
                    }
                    $(".list").append(html);
                    off_on = true;
                    $(".more").text('上了加载更多');

                    // 模拟没有数据
                    if (page >= 3) {
                        off_on = false;
                        $(".more").text('没有数据了');
                    }

                }
            },
            error: function () {
                alert('failed!');
            },
        })
    }

    // 上拉加载更多
    $(document).scroll(function () {
        var scroH = $(document).scrollTop();  //滚动高度
        var viewH = $(window).height();  //可见高度 
        var contentH = $(document).height();  //内容高度

        if (contentH - (scroH + viewH) <= 100) {  //距离底部高度小于100px
            if (off_on) {
                off_on = false;
                page++;
                console.log("第" + page + "页");
                getList();  //调用执行上面的加载方法
            }

        }

    });

})

// 打电话
function tel(phone) {
    window.location.href = 'tel:' + phone
}

// 导航

// 1、腾讯地图：
// 调用方式： http://apis.map.qq.com/uri/v1/marker?marker=coord:lat,lng;addr:address
// 其中lat、lng、address分别为经纬度和详细地址三个参数，
// 腾讯地图api：https://lbs.qq.com/uri_v1/guide.html
// 2、高德地图：
// 调用方式： http://uri.amap.com/marker?position=lng,lat&name=address&coordinate=gaode&callnative=1
// 其中lat、lng、address分别为经纬度和详细地址三个参数，
// 高德api：https://lbs.amap.com/api/uri-api/gettingstarted
// 3、百度地图：
// 调用方式：http://api.map.baidu.com/marker?location=纬度,经度&title=所在位置名称&content=所在位置的简介&output=html
// 百度地图api： http://lbsyun.baidu.com/index.php?title=uri/api/web#service-page-anchor2
function navigation(lat, lnt, name) {
    // 高德导航
    window.location.href = "http://uri.amap.com/marker?position=" + lat + "," + lnt + "&name=" + name + "&coordinate=gaode&callnative=1"
}